<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/account">

<head>
    <title>登录</title>
</head>
<div  layout:fragment="content">
    <div class="header text-center">
        <h1>
            <a href="/" class="logo">
                <img th:src="@{/css/default/logo_color.png}" alt="">
            </a>
        </h1>
        <p class="description text-muted">欢迎加入一起smart问答社区</p>
    </div>
    <div class="col-md-6 col-md-offset-3 bg-white login-wrap">
        <div th:if="${session.message}" th:classappend="${session.message.type==1}?'alert-danger':'alert-success'" class="alert alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <th:block th:text="${session.message.msg}"></th:block>
            <script>$(function () {$.get("/common/cleanSessionMessage");}); </script>
        </div>
        <h1 class="h4 text-center text-muted login-title">用户登录</h1>
        <form role="form" name="loginForm" th:action="@{/authentication/form}"  method="POST" >
            <div th:class="${session.usernameLoginError?.usernameMsg}? 'form-group has-error':'form-group'">
                <label class="required">用户名</label>
                <input type="text" class="form-control" name="username" required placeholder="用户名" th:value="${session.usernameLoginError?.username}">
                <span class="help-block" th:if="${session.usernameLoginError?.usernameMsg}" th:text="${session.usernameLoginError?.usernameMsg}"></span>
            </div>

            <div th:class="${session.usernameLoginError?.passwordMsg}? 'form-group has-error':'form-group'">
                <label for="" class="required">密码</label>
                <input type="password" class="form-control" name="password" required placeholder="不少于 6 位" th:value="${session.usernameLoginError?.password}"/>
                <span class="help-block" th:if="${session.usernameLoginError?.passwordMsg}" th:text="${session.usernameLoginError?.passwordMsg}"></span>
            </div>


            <div th:class="${session.usernameLoginError?.validateCodeMsg}? 'form-group has-error':'form-group'">
                <label for="captcha" class="required">验证码</label>
                <input type="text" class="form-control" id="captcha" name="imageCode" required="" placeholder="请输入下方的验证码">
                <span class="help-block" th:if="${session.usernameLoginError?.validateCodeMsg}" th:text="${session.usernameLoginError?.validateCodeMsg}"></span>
                <div class="mt-10"><a href="javascript:void(0);" id="reloadCaptcha"><img src="/code/image?width=60&height=20"></a></div>
            </div>
            <div class="form-group clearfix">
                <div class="checkbox pull-left">
                    <label><input name="remember-me" type="checkbox" value="1"> 记住登录状态</label>
                </div>
                <input type="hidden" name="return" th:value="${#request.getParameter('return')}"/>
                <button type="submit" class="btn btn-primary pull-right pl20 pr20">登录</button>
            </div>
            <hr />
            <div class="widget-login mt-30">
                <p class="text-muted mt-5 mr-10 pull-left hidden-xs">快速登录</p>
                <a href="#" class="btn btn-default btn-sm btn-sn-weibo" ><span class="icon-sn-bg-weibo"></span> <strong class="visible-xs-inline">新浪微博账号</strong></a>
                <a href="#" class="btn btn-default btn-sm btn-sn-qq" ><span class="icon-sn-bg-qq"></span> <strong class="visible-xs-inline">QQ 账号</strong></a>
            </div>
        </form>
    </div>

    <div class="text-center col-md-12 login-link">
        <a href="/account/register">注册新账号</a>
        |
        <a href="/">首页</a>
        |
        <a href="/forgetPassword">忘记密码</a>
    </div>
</div>